<template>
	<view>
		<u-navbar :is-back="false" background="#ffffff" :border-bottom="false"></u-navbar>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="showSet">
			<view class="u-m-r-10 avatar">
				<open-data type="userAvatarUrl" calss='avatar'></open-data>
			</view>
			<view class="u-flex-1 u-p-10">
				<view class="u-font-18 u-p-b-20">
					<view v-if="!user.wx_openid">登陆中</view>
					<open-data v-else type="userNickName"></open-data>
				</view>
				<view class="u-font-14 u-tips-color">易班号：{{user.yb_openid?user.yb_openid:'未绑定'}}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<text class="u-font-14 u-tips-color u-p-10">绑定</text>
				<u-icon name="edit-pen" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="hourglass-half-fill" title="时间">
					{{text}}
				</u-cell-item>
				<u-cell-item icon="hourglass-half-fill" title="次数">
					今天剩余{{5-number}}
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-30">
			<u-cell-group>
				<u-cell-item icon="photo" title="激励视频" @click="btn">
					{{tishi}}
				</u-cell-item>
				<u-cell-item icon="star" title="卡片任务">
					未开启
				</u-cell-item>
				<u-cell-item icon="coupon" title="benner">
					未开启
				</u-cell-item>
				<u-cell-item icon="heart" title="四方盒子">
					未开启
				</u-cell-item>
			</u-cell-group>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="show" mode="center" width="690" closeable>
			<view style="height: 80rpx;line-height: 80rpx;padding: 0 20rpx;">绑定易班账号</view>
			<view class="popup-box">
				<u-input border v-model="yb_openid"></u-input>
				<view style="margin: 10rpx;"></view>
				<u-button size="medium" @click="setyb">绑定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let videoAd = null
	export default {
		data() {
			return {
				user: {
					wx_openid: '',
					yb_openid: ''
				},
				yb_openid: '',
				show: false,
				text: '',
				tishi: '未完成',
				number: 0
			}
		},
		onLoad() {
			this.sign()
			this.adload()
			let number = uni.getStorageSync('number') ? uni.getStorageSync('number') : 0
			this.number = number
		},
		methods: {
			// 点击广告
			btn() {
				const stamp = Date.parse(new Date())
				let number = uni.getStorageSync('number')
				if (number >= 5) return this.$u.toast('超出次数')
				const time = uni.getStorageSync("time") ? uni.getStorageSync("time") : 1
				let newTime = new Date()
				newTime.setTime(time)
				if (stamp > time) {
					uni.showModal({
						title: '提示',
						content: '每天可以看五次视频，每次间隔十分钟',
						success: res => {
							if (res.confirm) {
								videoAd.show()
									.catch(() => {
										// 失败重试
										videoAd.load()
											.then(() => videoAd.show())
											.catch(err => {
												console.log('激励视频 广告显示失败')
											})
									})
							}
						}
					})
				} else {
					this.$u.toast('请在规定时间后重试')
				}
			},
			// 绑定弹窗
			showSet() {
				if (this.user.yb_openid) return uni.showToast({
					title: '已绑定',
					icon: 'none'
				});
				if (!this.user.wx_openid) return uni.showToast({
					title: '请等待'
				});
				this.show = true
			},
			// 绑定易班id
			setyb() {
				uni.showModal({
					title: '提示',
					content: '绑定过后将不能修改易班账号请仔细核对，如果确实有误请联系管理员修改',
					cancelText: '我再想想',
					confirmText: '确认绑定',
					success: res => {
						if (res.confirm) {
							uniCloud.callFunction({
								name: 'sign',
								data: {
									action: 'setyb',
									id: {
										yb_openid: this.yb_openid,
										wx_openid: this.user.wx_openid
									}
								},
								success: res => {
									uni.showToast({
										title: '绑定成功',
										icon: 'none'
									})
									this.user.yb_openid = this.yb_openid
									this.show = false
								},
								fail: err => {
									uni.showToast({
										title: '获取信息失败',
										icon: 'none'
									})
								}
							})
						}
					}
				});
			},
			// 获取小程序openid
			sign() {
				uni.login({
					provider: 'weixin',
					success: res => {
						uniCloud.callFunction({
							name: 'sign',
							data: {
								action: 'sign',
								code: res.code
							},
							success: id => {
								console.log(id);
								const user = {
									wx_openid: id.result.wx_openid,
									yb_openid: id.result.yb_openid
								}
								this.user = user
								uni.setStorageSync('openid', user)
							},
							fail: err => {
								uni.showToast({
									title: '获取信息失败',
									icon: 'none'
								})
							}
						})
					}
				})
			},
			adload() {
				const stamp = Date.parse(new Date())
				const time = uni.getStorageSync("time") ? uni.getStorageSync("time") : 1
				let newTime = new Date()
				let date = new Date()
				date.setTime(stamp)
				newTime.setTime(time)
				if (date.getDate() != newTime.getDate()) {
					uni.setStorageSync('number', 0)
					this.number = 0
				}
				if (time !== 1) this.text = `请在 ${newTime.getHours()}时${newTime.getMinutes()}分 尝试点击任务`
				else this.text = '立即完成任务'
				console.log(this.text);
				console.log(stamp, time);
				if (stamp > time && wx.createRewardedVideoAd) {
					this.this = "未完成"
					videoAd = wx.createRewardedVideoAd({
						adUnitId: 'adunit-952765eecba4e4f2'
					})
					videoAd.onLoad(() => {})
					videoAd.onError((err) => {})
					videoAd.onClose((res) => {
						if (res.isEnded) {
							// 视频播放成功后退出，需要限制时间
							const newStamp = Date.parse(new Date())
							uni.setStorageSync("time", newStamp + (10 * 60 * 1000))
							uni.setStorageSync('number', +this.number + 1)
							this.number++
							this.tishi = '已完成'
							newTime.setTime(stamp + (1 * 60 * 1000))
							this.text = `请在 ${newTime.getHours()}时${newTime.getMinutes()}分 尝试点击任务`
						} else {
							// 视频播放失败后退出，提示信息
							this.$u.toast('请看完一次视频后再试')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup-box {
		padding: 20rpx;
		display: flex;
		align-items: center;
	}

	page {
		background-color: #ededed;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		overflow: hidden;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}
</style>
